<template>
    <div class="vwatch">
        <h2>watch</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            监视属性。<br>
            观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。<br>
            回调函数得到的参数为新值和旧值。<br>
            表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。<br>
            同样的，watch中的函数，也不应该用箭头函数。<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            配置项
        </el-tag>
        <p class="decr">
            1. handler<br>
            作为回调函数的名称。有接收两个参数，分别是改变后的新值val和改变前的旧值oldVal。<br>
            2. deep<br>
            当监听的属性是一个对象时，且需要监听该对象内的数据是否有变化时，配置deep: true选项。<br>
            3. immediate<br>
            当监听的属性的handler需要在初始化时就执行，可以开始配置项immediate: true<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag><br>
        <el-button @click="changeA">改变a的值</el-button><br>
        <el-button @click="changeB">改变b的值</el-button><br>
        <el-button @click="changeC">改变c的值</el-button><br>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vwatch',
    mixins: [mixinPage],
    data() {
        return {
            a: 1,
            b: {
                c: 2,
                d: {
                    f: 3
                }
            }
        }
    },
    methods: {
        changeA() {
            this.a = 10;
        },
        changeB() {
            this.b = {
                c: 200,
                d: {
                    f: 300
                }
            };
        },
        changeC() {
            this.b.c = 20;
        }
    },
    watch: {
        // val是被改变后的值，oldVal是改变前的值
        // 如果是比较简单的监听，可以用这种简写形式
        a(val, oldVal) {
            console.log('val: ', val, 'oldVal: ', oldVal);
        },
        // 监测带有嵌套的对象数据，加入deep: true配置，可以让vue监测到对象内部嵌套层里的数据变化
        b: {
            handler: function(val, oldVal) {
                console.log('val: ', val, 'oldVal: ', oldVal);
            },
            deep: true
        },
        // 嵌套层内的数据的监视，就要用'b.c'这种写法了，只写一个c是无效的，vue监测不到
        'b.c': {
            handler: function(val, oldVal) {
                console.log('val: ', val, 'oldVal: ', oldVal);
            }
        },
        'b.d': {
            handler: function(val, oldVal) {
                console.log('val: ', val, 'oldVal: ', oldVal);
            },
            // immediate可以让初始化渲染时就调用该handler函数
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';

.el-button {
    margin-top: 10px;
}
</style>